<template>
    <div class="footer" style="height: 60px;">
    	<div class="pfooter clear2" ref='pfooter'>
    		<div class="pfooter-icon">
    			<i class="iconfont icon-shouye"></i>
    			<p>首页</p>
    		</div>
    		<div class="pfooter-icon">
    			<i class="iconfont icon-shoucang"></i>
    			<p>收藏</p>
    		</div>
    		<div class="pfooter-button" @click="$parent.purchase()">
    			<p>立即兑换</p>
    		</div>
    	</div>
    	
    </div>
</template>

<script>
	import Vue from 'vue';
    export default {
    	watch:{
    		'$route':'bianhua'
    	},
    	components:{
        },
    	props:[
    	
    	],
        data: function(){
            return {
                
            }
        },
        mounted(){
        	
        },
        methods: {
        	
            
        }
    }
</script>

<style scoped>
	.footer{
		display: block;
	}
	
	.pfooter{
		position: fixed;
		z-index: 1;
		bottom: 0;
		left: 0;
		height: 50px;
		box-sizing: border-box;
		width: 100%;
		border-top: 2px solid #707070;
		background: #fff;
		padding: 0 2%;
		
	}
	.pfooter-icon{
		width: 13%;
		text-align: center;
		float: left;
		display: flex;
		align-items: center;
		height: 100%;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-moz-box-orient: vertical;
		-moz-box-direction: normal;
		flex-direction: column;
		-webkit-flex-direction: column;
	}
	.pfooter-icon i{
		font-size: 2.5rem;		
		
	}
	.pfooter-icon p{
		font-size: 1.4rem;		
		
	}
	.pfooter-button{
		width: 60%;
		float: right;
		display: flex;
		justify-content: center;
		height: 100%;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-moz-box-orient: vertical;
		-moz-box-direction: normal;
		flex-direction: column;
		-webkit-flex-direction: column;
	}
	.pfooter-button p {
		font-size: 1.4rem;
		color: #f7bd40;
		width: 100%;
		padding: 8px 0;
		text-align: center;
		background: #000;
		border-radius: 4px;
	}
</style>